import XtxHomePanel from "@/components/library/xtxHomePanel";
import { Link } from "react-router-dom";
import "./index.scss";
import { Fragment, useEffect, useRef, useState } from "react";
import { useAxiosWithAuth } from "@/utils/useAxiosWidthAuth";
import classNames from "classnames";
import useLazyData from "@/hooks/lazyData";
import { CSSTransition } from "react-transition-group";
import XtxSkeleton from "@/components/library/xtxSkeleton";
function HomeBrand() {
  const axios = useAxiosWithAuth();
  const [brandList, setBrandList] = useState<any[]>([]);
  const [index, setIndex] = useState(0);

  const noderef = useRef(null);
  const target = useRef(null);
  function getBrands() {
    return axios({
      method: "get",
      url: "/home/brand",
      params: { limit: 10 },
    });
  }

  const result = useLazyData(target, getBrands);
  useEffect(() => {
    setBrandList(result);
  }, [result]);

  const toggle = function (step: number) {
    const newIndex = index + step;
    if (newIndex < 0 || newIndex > 1) {
      return;
    }

    setIndex(newIndex);
  };
  return (
    <>
      <XtxHomePanel
        title="热门品牌"
        subTitle="国际经典 品质保证"
        right={
          <>
            <a
              href="javascript:;"
              className={classNames("iconfont icon-angle-left prev hotzks", {
                disabled: index === 0,
              })}
              onClick={() => toggle(-1)}
            ></a>
            <a
              href="javascript:;"
              className={classNames("iconfont icon-angle-right next hotzks", {
                disabled: index === 1,
              })}
              onClick={() => toggle(1)}
            ></a>
          </>
        }
      >
        <div className="box" ref={target}>
          <CSSTransition
            in={brandList.length ? true : false}
            classNames="fade"
            timeout={300}
            unmountOnExit
            nodeRef={noderef}
          >
            <div ref={noderef}>
              {brandList?.length ? (
                <ul
                  className="list"
                  style={{ transform: `translateX(${-index * 1240}px)` }}
                >
                  {brandList.map((item) => (
                    <li key={item.id}>
                      <Link to="/">
                        <img src={item.picture} alt="" />
                      </Link>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className="skeleton">
                  {[1, 2, 3, 4, 5].map((item) => (
                    <Fragment key={item}>
                      <XtxSkeleton
                        animated
                        bg="#e4e4e4"
                        width="240px"
                        height="305px"
                      />
                    </Fragment>
                  ))}
                </div>
              )}
            </div>
          </CSSTransition>
        </div>
      </XtxHomePanel>
    </>
  );
}
export default HomeBrand;
